<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	span.decision{	
		font-weight:bold;
        border:thin solid #000000;
        padding:5px;
        background-color:#DDDDDD;           
	}
	
	span.decisionhover{
		font-weight:bold;
        border:thin solid #000000;
        padding:5px;
        background-color:#EEEEEE;    
        cursor: pointer;    
	}
</style>
   
<script>
	var curScene = 0;
	function changeScene(decision){
		var message = "";
		var decision1="",decision2="";
		var history="";
		
		
		
		switch (curScene) {
        case 0:
          curScene = 1;
          document.getElementById("decision2").style.visibility = "visible";
          message = "Your journey begins at a fork in the road.";
          decision1 = "Take the Path";
          decision2 = "Take the Bridge";
          break;
        case 1:
          if (decision == 1) {
            curScene = 2
            message = "You have arrived at a cute little house in the woods.";
            decision1 = "Walk around Back";
            decision2 = "Knock on Door";
          }
          else {
            curScene = 3;
            message = "You are standing on the bridge overlooking a peaceful stream.";
            decision1 = "Walk across Bridge";
            decision2 = "Gaze into Stream";
          }
          break;
        case 2:
          if (decision == 1) {
            curScene = 4
            message = "Peeking through the window, you see a witch inside the house.";
            decision1 = "Sneak by Window";
            decision2 = "Wave at Witch";
          }
          else {
            curScene = 5;
            message = "Sorry, a witch lives in the house and you just became part of her stew.";
            decision1 = "Start Over";
            decision2 = "";
          }
          break;
        case 3:
          if (decision == 1) {
            curScene = 6
            message = "Sorry, a troll lives on the other side of the bridge and you just became his lunch.";
            decision1 = "Start Over";
            decision2 = "";
          }
          else {
            curScene = 7;
            message = "Your stare is interrupted by the arrival of a huge troll.";
            decision1 = "Say Hello to Troll";
            decision2 = "Jump into Stream";
          }
          break;
        case 4:
          if (decision == 1) {
            curScene = 8
            decision1 = "?";
            decision2 = "?";
          }
          else {
            curScene = 5;
            message = "Sorry, you became part of the witch's stew.";
            decision1 = "Start Over";
            decision2 = "";
          }
          break;
        case 5:
          curScene = 0;
          decision1 = "Start Game";
          decision2 = "";
          break;
        case 6:
          curScene = 0;
          decision1 = "Start Game";
          decision2 = "";
          break;
        case 7:
          if (decision == 1) {
            curScene = 6
            message = "Sorry, you became the troll's tasty lunch.";
            decision1 = "Start Over";
            decision2 = "";
          }
          else {
            curScene = 9;
            decision1 = "?";
            decision2 = "?";
          }
          break;
        case 8:
          // TO BE CONTINUED
          break;
        case 9:
          // TO BE CONTINUED
          break;
        }
		
		document.getElementById("sceneimg").src="./images/scene"+curScene+".png";
		//document.getElementById("scenetext").innerHTML=message;
		//document.getElementById("scenetext").firstChild.nodeValue = message;
		var script = document.getElementById("scenetext");
		/* while(script.firstChild)
			script.removeChild(script.firstChild);		
		script.appendChild(document.createTextNode(message)); */
		changeNodeTest(script,message);
		changeNodeTest(document.getElementById("decision1"),decision1);
		changeNodeTest(document.getElementById("decision2"),decision2);		
		makeHistory(curScene,document.getElementById("history"),decision,message);
	}
	
	function changeNodeTest(node,text){
		while(node.firstChild)
			node.removeChild(node.firstChild);
		node.appendChild(document.createTextNode(text));
	}
	
	function makeHistory(curScene,node,decision,message){		
		if(curScene==0){
			while(node.firstChild)
				node.removeChild(node.firstChild);
		}else{
			var p =  document.createElement("p");
			p.appendChild(document.createTextNode("Decision"+decision+"-> scene"+curScene+":"+message));
			node.appendChild(p);
		}
	}
</script>
</head>
<body>
	<div style="margin-top:100px;text-align:center">
		<img id="sceneimg" src="./images/scene0.png" alt="Stick Figure Adventure" /><br>
		<div id="scenetext" > </div><br>
		please choose:
		<span id="decision1" onclick="changeScene(1)" class="decision" onmouseover="this.className='decisionhover'" onmouseout="this.className='decision'">Start</span>
      	<span id="decision2" onclick="changeScene(2)" class="decision" onmouseover="this.className='decisionhover'" onmouseout="this.className='decision'" style="visibility: hidden;"></span>
	</div>
	<div id="history" style="text-align: center;"></div>
	
</body>
</html>